<template>
  <el-form-item label="下边框">
    <el-radio-group v-model="editorForm.borderBottom.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>
    <div v-if="!editorForm.borderBottom.isDefault" class="custom-next">
      <div class="padding-setting">
        <div v-if="editorForm.borderBottom.hasOwnProperty('width')" class="padding-item p0">
          <span>宽度：</span>
          <el-input v-model="editorForm.borderBottom.widthPxValue" type="number" @input="getRealValue" />
        </div>
        <div v-if="editorForm.borderBottom.hasOwnProperty('color')" class="padding-item">
          <span>颜色：</span>
          <el-color-picker show-alpha v-model="editorForm.borderBottom.color" @change="handleColorChange" />
        </div>
      </div>
      <div class="pl-28">
        <div v-if="editorForm.borderBottom.hasOwnProperty('style')" class="padding-item" style="width: 100%">
          <span>样式：</span>
          <el-radio-group v-model="editorForm.borderBottom.style" style="margin-left: 12px">
            <el-radio label="solid">实线</el-radio>
            <el-radio label="dashed">虚线</el-radio>
            <el-radio label="dotted">点线</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { inject, ref, onMounted } from 'vue'
import { pxToRem } from '@/utils/tools'

const { editorForm, domList, changeDefault, backUpdate } = inject('commonForm')
// 初始化属性和元素对应关系
const bindDom = ref(new Set())
const initDomMapping = () => {
  const bindKeys = [`${editorForm.value._key}.borderBottom.width`, `${editorForm.value._key}.borderBottom.color`, `${editorForm.value._key}.borderBottom.style`]
  domList.value.forEach(element => {
    const bindValue = element.getAttribute('_bind')
    bindKeys.forEach(key => {
      if (bindValue.includes(key)) {
        bindDom.value.add(element)
      }
    })
  })
}

const handleDefault = (val) => {
  if (val) {
    changeDefault('borderBottom')
  }
  bindDom.value.forEach(element => {
    Object.hasOwn(editorForm.value.borderBottom, 'width') ? element.style.borderBottomWidth = editorForm.value.borderBottom.width : ''
    Object.hasOwn(editorForm.value.borderBottom, 'color') ? element.style.borderBottomColor = editorForm.value.borderBottom.color : ''
    Object.hasOwn(editorForm.value.borderBottom, 'style') ? element.style.borderBottomStyle = editorForm.value.borderBottom.style : ''
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const handleColorChange = () => {
  bindDom.value.forEach(element => {
    element.style.borderBottomColor = editorForm.value.borderBottom.color
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const getRealValue = () => {
  editorForm.value.borderBottom.width = pxToRem(editorForm.value.borderBottom.widthPxValue)
  bindDom.value.forEach(element => {
    Object.hasOwn(editorForm.value.borderBottom, 'width') ? element.style.borderBottomWidth = editorForm.value.borderBottom.width : ''
    Object.hasOwn(editorForm.value.borderBottom, 'color') ? element.style.borderBottomColor = editorForm.value.borderBottom.color : ''
    Object.hasOwn(editorForm.value.borderBottom, 'style') ? element.style.borderBottomStyle = editorForm.value.borderBottom.style : ''
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

onMounted(() => {
  initDomMapping()
})
</script>

<style lang="scss" scoped>

</style> 